<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{layout/layout}">
<head>
    <title th:text="${blogPost.title}">首页</title>
    <meta name="Keywords" content="keywords" th:content="|${blogPost.title},${site.getFixKeyWord()}|">
    <meta name="description" content="资讯，博客，时事要闻" th:content="|${blogPost.summary?:blogPost.title},${site.getFixDescription()}|">
    <style>
        #content-container:before {
            display: none;
        }
    </style>
    <link href="//static.qintingfm.com/ckeditor5/build/content-style.css" rel="stylesheet">
</head>
<body>
<ul id="mainnav-menu" class="list-group" layout:fragment="menu" th:include="fragments/common::menu('/')"></ul>
<div id="page-content" layout:fragment="content">
    <div class="panel blogPost blogPost-details">
        <div class="panel-body">
            <div class="blogPost-title media-block">
                <div class="media-body">
                    <h1 th:utext="${blogPost.title}">title</h1>
                </div>
            </div>
            <div th:if="${blogPost.blogCategory}">
                <span>分类：</span>
                <span th:each="item:${blogPost.blogCategory}">
                    <a th:utext="${item.title}" th:href="@{/blogPost/category/{catName}(catName=${item.title})}" href="#"
                       class="badge"> 分类></a>
                </span>
            </div>
            <div class="blogPost-content">
                <div class="blogPost-body ck-content" th:utext="${blogPost.blogCont.cont}"/>
            </div>
            <div class="blogPost-footer">
                <div class="media-left">
                    <span class="label label-primary"
                          th:text="${#dates.format(blogPost.dateCreated,'yyyy-MM-dd HH:mm:ss')}">5 Days ago</span>
                    <small th:if="${blogPost.author}">作者 : <a href="#" class="btn-link"
                                                              th:utext="${blogPost.author.username}"
                                                              th:if="${blogPost.author}"
                                                              th:href="@{/user/view/{id}(id=${blogPost.author.id})}">author</a></small>
                    <small><a href="blogPost.html" th:href="@{/blogPost/blogPost/{postId}(postId=${blogPost.postId})}">编辑</a></small>
                </div>
            </div>
            <!-- Comment form -->
            <!--===================================================-->
            <hr class="new-section-sm bord-no"/>
            <p class="text-lg text-main text-bold text-uppercase">评论</p>
            <form class="ajaxform" method="blogPost" th:action="@{/blogPost/postComment/{postId}(postId=${blogPost.postId})}">
                <div class="row">
                    <div class="col-md-12">
                        <div class="form-group">
                            <textarea class="form-control comment" rows="9" placeholder="文明上网,理性发言。"
                                      name="cont"></textarea>
                        </div>
                        <div class="form-group">
                            <button type="submit" class="btn btn-primary btn-block"><i class="fa fa-comment"></i> 评论
                            </button>
                        </div>
                    </div>
                </div>
            </form>

            <hr class="new-section-sm"/>

            <!-- Comments -->
            <!--===================================================-->
            <div class="comments media-block" th:each="coment:${blogComment}" th:if="${blogComment}">
                <a class="media-left" href="#"><img class="img-circle img-sm" alt="Profile Picture"
                                                    src="//static.qintingfm.com/nifty/v2.9/img/profile-photos/8.png"/></a>
                <div class="media-body">
                    <div class="comment-header">
                        <a href="#" class="media-heading box-inline text-main text-bold"
                           th:utext="${coment.author.username}" th:if="${coment.author}">Author</a>
                        <p class="text-muted text-sm" th:utext="${coment.getCreateDate()}">创建时间</p>
                    </div>
                    <p th:utext="${coment.getCont()}">comnent</p>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-5">
                    <div th:text="|展现${blogComment.pageable.pageNumber+1}页 ,共计${blogComment.totalPages}页,合计${blogComment.totalElements}条|"></div>
                </div>
                <div class="col-sm-7 text-right">
                    <ul class="pagination"
                        th:replace="fragments/common::pager(${blogComment.pageable.pageNumber+1},${blogComment.totalPages},'/blogPost/view/'+${blogPost.postId}+'/{page}')"/>
                </div>
            </div>
        </div>
    </div>
</div>
<div layout:fragment="footjs">
    <script src="//static.qintingfm.com/ckeditor5/build/ckeditor.js"></script>
    <script src="//static.qintingfm.com/ckeditor5/build/translations/zh-cn.js"></script>
    <script>
        $(document).on('nifty.ready', function () {
            ClassicEditor
                .create(document.querySelector('.comment'), {
                    toolbar: {
                        items: [
                            'bold',
                            'italic',
                            'underline',
                            'strikethrough',
                            'fontColor',
                            '|',
                            'blockQuote',
                            '|',
                            'removeFormat'
                        ]
                    },
                    language: 'zh-cn',
                    licenseKey: '',
                })
                .then(editor => {
                    window.editor = editor;
                })
                .catch(error => {
                    console.error(error);
                });
        });
    </script>
</div>
</body>
</html>